<template>
	<view class="content">
		<view class="top-bg">
		</view>
		<view class="top">
			<view class="logo-box">
				<view style="height: var(--status-bar-height); width: 100%;"></view>
				<u-navbar :isBack='false' title="客户列表" :titleStyle="{fontSize:'18',fontWeight: 'bold',color:'#fff'}"
					bgColor="transparent" :autoBack="false">
				</u-navbar>
				<!-- 顶部下拉 -->
			</view>

			<view class="index-box">
				<u-row>
					<u-col span="7">

						<view class="index-input">
							<view style="width: 10%;margin-right: 10rpx;">
								<u-icon name="search" color="#fff" size="28"></u-icon>
							</view>
							<view style="width: 60%;">
								<u--input placeholder="请输入关键词" v-model="queryParam.keyword"
									placeholderStyle="color:#fff" border="none" confirmType="search"
									@confirm="doSearch"></u--input>
							</view>
							<view class="search" @click="doSearch">
								搜索
							</view>
						</view>

					</u-col>

					<u-col span="5">
						<view class="index-right" @click="typeShow = true">
							<view style="padding: 0px 10rpx;">
								{{summaryKey[queryParam.summary]}}
							</view>
							<view>
								<img src="/static/images/index/xl.png" style="width: 34rpx;height: 35rpx;" alt="">
							</view>
						</view>
					</u-col>
				</u-row>
			</view>

		</view>
		<view class="nr-box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">


				<view class="nr-item">
					<view class="nr-div" v-for="(item,index) in listData" :key="index" v-if="listData.length>0">
						<view class="nr-title" @click="clickButShow(index)">
							<view class="nr-name">
								<span>
									{{item.real_name}}
								</span>
								<u-icon name="weixin-fill" color="#4CBF00" size="28" v-if='item.wechat'></u-icon>

							</view>
							<view class="" v-if="butShow == index">
								<u-icon name="arrow-up" color="#3477FC" size="24"></u-icon>

							</view>
							<view class="" v-else>

								<u-icon name="arrow-down" color="#3477FC" size="24">
								</u-icon>
							</view>
						</view>
						<view class="nr-kh">
							客户电话：{{item.mobile}} <span v-if="item.cart"
								style="padding: 0px 20px;">意向车型：{{item.cart}}</span>
						</view>
						<!-- <view class="nr-kh2">
							到店时间：2023-04-05</span>
						</view> -->

						<view class="nr-but" v-if="butShow == index" style="width:100%;">
							<u-row customStyle="margin-bottom: 10px;width:100%;" gutter="10">
								<u-col span="4">
									<u-button type="success" size="small" icon="phone" text="电话沟通"
										@click="callphone(item)" v-if="item.type ==0"></u-button>
									<u-button type="success" size="small" icon="phone" text="电话沟通"
										@click="callphone2(item)" v-else></u-button>

								</u-col>
								<u-col span="4">
									<u-button type="primary" size="small" text="查看详情" @click="getUserInfo(item.id)"
										v-if="item.type ==0">
									</u-button>
								</u-col>
							</u-row>

						</view>

					</view>


					<!-- 为空 -->
					<view class=""
						style="width: 100%;height: 600rpx;display: flex;justify-content: center;align-items: center;"
						v-if="listData.length == 0">
						<u-empty mode="list">

						</u-empty>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 添加拨打电话用户状态	 -->
		<u-popup :show="phoneShow" round="8" :closeOnClickOverlay="false" :safeAreaInsetTop='false' :closeable="true"
			mode="center" @close="close" @open="open">
			<view class="client-box">
				<view class="client-title">
					客户跟进
				</view>
				<view class="client-cell">
					<u-cell :border='false' title="客户状态" :isLink="true" @click="userShow = true">
						<text slot="value" style="color: #3477FC;">{{summaryKey[form.summary]}}</text>
					</u-cell>
				</view>
				<view class="client-cell">
					<u-cell :border='false' title="是否同意加微信" :isLink="true" @click="wxShow = true">
						<text slot="value" style="color: #3477FC;">{{wxkey[form.wechat]}}</text>
					</u-cell>
				</view>

				<view class="client-nr">
					<view class="nr-title">跟进记录</view>
					<view class="nr-text">
						<u-textarea height="90" v-model="form.content" placeholder="请输入内容"></u-textarea>
					</view>
				</view>

				<view class="client-but">
					<u-button type="primary" text="提交" @click='formOK'></u-button>
				</view>

			</view>
			<u-toast ref="uToast"></u-toast>
			<!-- 客户状态		 -->
			<u-picker :show="userShow" @confirm="usertypeSelectOk" closeOnClickOverlay keyName="label"
				@close="UsercloseType" :columns="typeColumns2" @cancel="usertypeSelectNot"></u-picker>
			<!-- 是否加微信 -->
			<u-picker :show="wxShow" @confirm="wxtypeSelectOk" closeOnClickOverlay keyName="label" @close="wxclose"
				:columns="wxColumns" @cancel="wxtypeSelectNot"></u-picker>
		</u-popup>

		<!-- 类型弹出层 -->
		<u-picker :show="typeShow" @confirm="typeSelectOk" closeOnClickOverlay keyName="label" @close="typeclose"
			:columns="typeColumns" @cancel="typeSelectNot"></u-picker>

		<my-tabbar :currentTab='2' />

	</view>
</template>

<script>
	import {
		getWorkListApi,
		getWorksaveApi,
		getWorkcallApi
	} from '@/api/system/index'
	import {
		nextTick
	} from "vue"
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				navbar: 0, //状态栏高度
				statusBar: 0, // 状态栏高度 + 导航栏高度  
				customBar: 0, // 自定义标题与胶囊对齐高度

				butShow: null,
				phoneShow: false,
				listshow: true,
				infoStatus: null,
				form: {
					content: '',
					wechat: 0,
					summary: '',
					activeId: null,
					userId: null

				},
				queryParam: {
					page: 1,
					limit: 10,
					keyword: null,
					activeId: null,
					summary: "all",
				},
				total: 0,
				typeShow: false,
				loadingIs: true,
				typeColumns: [
					[{
							label: '全部',
							key: 'all'
						},
						{
							label: '待跟',
							key: 'wait'
						},
						{
							label: '重点',
							key: 'important'
						},
						{
							label: '有效',
							key: 'notBuy'
						},
						{
							label: '未接',
							key: 'notAnswer'
						},
						// {
						// 	label: '已购',
						// 	key: 'okBuy'
						// },
						{
							label: '无效',
							key: 'invalid'
						},
						// {
						// 	label: '战败',
						// 	key: 'fail'
						// },
						// {
						// 	label: '加微信',
						// 	key: 'wechat'
						// },
						// {
						// 	label: '报名已交诚意金',
						// 	key: 'okSincerity'
						// },
						// {
						// 	label: '报名未交诚意金',
						// 	key: 'notSincerity'
						// },

						// {
						// 	label: '已交定金',
						// 	key: 'okDeposit'
						// },
						// {
						// 	label: '未交定金',
						// 	key: 'notDeposit'
						// }
					]
				],
				typeColumns2: [
					[{
							label: '待跟',
							key: 'wait'
						},
						{
							label: '重点',
							key: 'important'
						},
						{
							label: '有效',
							key: 'notBuy'
						},
						{
							label: '未接',
							key: 'notAnswer'
						},
						// {
						// 	label: '已购',
						// 	key: 'okBuy'
						// }, 
						{
							label: '无效',
							key: 'invalid'
						},
						// {
						// 	label: '战败',
						// 	key: 'fail'
						// },
						// {
						// 	label: '加微信',
						// 	key: 'wechat'
						// },
						{
							label: '报名已交诚意金',
							key: 'okSincerity'
						},
						{
							label: '报名未交诚意金',
							key: 'notSincerity'
						},

						// {
						// 	label: '已交定金',
						// 	key: 'okDeposit'
						// },
						// {
						// 	label: '未交定金',
						// 	key: 'notDeposit'
						// }
					]
				],
				summaryKey: {
					all: "全部",
					wait: "待跟",
					important: "重点",
					notBuy: "有效",
					notAnswer: "未接",
					invalid: "无效",
					// okBuy: "已购",
					// fail: "战败",
					// wechat: "加微信",
					okSincerity: "报名已交诚意金",
					notSincerity: "报名未交诚意金",
					// okDeposit: "已交定金",
					// notDeposit: "未交定金"
				},
				userShow: false,
				wxShow: false,
				typeName: '',


				wxkey: {
					0: "否",
					1: "是"
				},
				wxColumns: [
					[{
							label: '是',
							key: 1
						}, {
							label: '否',
							key: 0
						}

					]
				],

				listData: []
			}
		},
		mounted() {


		},
		onHide() {
			this.queryParam = {
				page: 1,
				limit: 10,
				keyword: null,
				activeId: null,
				summary: "all",
			}


		},
		onLoad(options) {

			if (options.key && options.activeId) {
				this.queryParam.activeId = parseInt(options.activeId)
				this.queryParam.summary = options.key
				if (options.startDate && options.endDate) {

					this.queryParam.startDate = options.startDate
					this.queryParam.endDate = options.endDate
				}
			}

		},
		onShow() {
			var stort_ac_id = uni.getStorageSync('active_id')
			var stort_ac_title = uni.getStorageSync('active_title')
			var stort_ac_key = uni.getStorageSync('summary');
			this.queryParam.activeId = stort_ac_id
			this.queryParam.summary = stort_ac_key
			this.typeName = stort_ac_title

			this.listData = []
			this.listshow = true
			this.getWorkListData()
		},

		created() {

			this.loadingIs = true
		},
		methods: {
			clickButShow(index) {
				if (this.butShow == index) {

					this.butShow = null

				} else {
					this.butShow = index
				}


			},

			async getWorkListData() {

				getWorkListApi(this.queryParam).then(res => {

					if (!res.code) {

						this.listData = [...this.listData, ...res.data]

						this.total = res.count
					}
					this.listshow = false

				})

			},

			open() {
				// console.log('open');
			},
			close() {


				this.phoneShow = false
			},
			getUserInfo(id) {

				this.$tab.navigateTo(`/pagesA/work/detail?id=${id}`)
			},
			upper: function(e) {

				// console.log(e)
			},
			async asylower() {

				//判断当前数据数量是否
				if (this.listData.length * this.queryParam.page >= this.total) return false

				this.queryParam.page++
				await this.getWorkListData()


				console.log("触底了")
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			//
			clearKeyword() {

				this.queryParam.keyword = ''
			},
			callphone(item) {



				var that = this
				var arr = {
					activeId: item.active_id,
					userId: item.id,
					mobile: item.mobile,
					realName: item.real_name
				}
				that.form.wechat = item.wechat
				that.form.summary = item.summary
				that.form.userId = item.id
				that.form.activeId = item.active_id
				getWorkcallApi(arr).then(res => {

					if (!res.code) {

						uni.makePhoneCall({
							phoneNumber: item.mobile, //仅为示例
							success(res) {
								//用户拒绝权限后任然会走这个函数，

							},
							fail(err) {


							},
							complete() {

								that.phoneShow = true

							}
						});
					}

				})

			},
			callphone2(item) {

				var that = this

				var arr = {
					activeId: item.active_id,
					userId: item.id,
					mobile: item.mobile,
					realName: item.real_name
				}
				that.form.wechat = item.wechat
				that.form.summary = item.summary
				that.form.userId = item.id
				that.form.activeId = item.active_id
				getWorkcallApi(arr).then(res => {

					if (!res.code) {
						uni.makePhoneCall({
							phoneNumber: item.mobile, //仅为示例
							success(res) {
								//用户拒绝权限后任然会走这个函数，

							},
							fail(err) {


							},
							complete() {


							}
						});
					}


				})
			},
			async changeKwyword() {
				this.listData = []
				await this.getWorkListData()
			},
			async doSearch() {
				this.listData = []
				await this.getWorkListData()

			},
			getSelectType() {
				this.show = true
			},
			change(e) {

			},
			async typeSelectOk(e) {
				var data = e.value[0]

				this.queryParam.summary = data.key
				this.queryParam.page = 1
				this.listData = []

				this.typeShow = false

				await this.getWorkListData()
			},
			typeclose() {
				this.typeShow = false


			},
			typeSelectNot() {
				this.typeShow = false
			},
			UsercloseType() {


			},
			usertypeSelectOk(e) {
				var data = e.value[0]

				this.form.summary = data.key

				this.userShow = false

			},
			wxtypeSelectOk(e) {
				var data = e.value[0]

				this.form.wechat = data.key

				this.wxShow = false

			},

			usertypeSelectNot() {

				this.userShow = false
			},
			wxtypeSelectNot() {

				this.wxShow = false
			},
			async closeType() {

				await this.getWorkListData()

			},
			async formOK() {

				//判断当前
				if (this.form.summary == null || this.form.summary == '') {

					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择客户状态"

					})
					return false

				}
				if (('0' != (this.form.wechat).toString()) && (this.form.wechat == null || this.form.wechat == '')) {

					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择微信添加状态"

					})
					return false

				}
				if (this.form.content == null || this.form.content == '') {

					this.$refs.uToast.show({
						type: 'warning',
						message: "请填写跟进记录"

					})
					return false
				}
				var that = this

				await getWorksaveApi(that.form).then(res => {

					if (!res.code) {

						that.$refs.uToast.show({
							type: 'success',
							message: '添加成功',
							complete() {
								that.phoneShow = false
								that.form = {
									content: '',
									wechat: 0,
									summary: '',
									activeId: null,
									userId: null
								}
								that.listData = []
								that.getWorkListData()
							}

						})


					}


				})




			}

		},


	}
</script>

<style lang="scss">
	page {
		background-color: #e3e3f72b !important;
	}

	.scroll-Y {
		height: calc(100vh - 310rpx);
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

	}


	.content {
		.top-bg {
			position: absolute;
			width: 100%;
			height: 637rpx;
			background: linear-gradient(0deg, #FFFFFF 0%, #3477FC 100%);
			z-index: -100;
		}

		.top {
			position: relative;
			display: flex;
			flex-direction: column;
			z-index: 1000;

			.logo-box {

				width: 100%;
				height: 310rpx;
				// position: absolute;
				font-weight: bold;
				z-index: -100;


			}
		}

	}

	.index-box {
		position: absolute;
		bottom: 10%;
		width: 100%;
		padding: 0px 10px;

		.index-input {

			width: 100%;
			background-color: #ffffff57;
			padding: 10rpx 10rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search {
				width: 30%;
				border-left: 1px solid #fff;
				text-align: center;
				color: #fff;
				font-weight: bold;
			}
		}

		// color: #fff;
		.index-cell {
			border: 1px solid #fff;
		}

		.index-right {
			display: flex;
			justify-content: flex-end;
			color: #fff;
		}
	}

	.nr-box {

		width: 93%;
		margin: 0 auto;
		height: 100%;
		background: #f6f6ff;

		.nr-item {
			width: 100%;

			border-radius: 5px;
			box-shadow: 0 0 1px #ccc;
			margin-bottom: 40rpx;

			.nr-title {
				width: 100%;
				color: #333;
				// font-weight: bold;
				// font-size: 32rpx;
				padding: 0rpx 20rpx;
				display: flex;
				justify-content: space-between;

				.nr-name {
					font-weight: bold;
					display: flex;
					justify-content: baseline;
				}

			}

			.nr-kh {
				width: 100%;
				padding: 20rpx;
				color: #999999;
			}

			.nr-kh2 {
				width: 100%;
				padding: 0rpx 20rpx;
				color: #999999;
			}

			.nr-div:last-child {
				border-bottom: none;
			}

			.nr-div {
				background-color: #fff;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx;
				border-bottom: 1px dashed #ccc;
				margin-bottom: 20rpx;

				.nr-li {

					padding: 20rpx 69rpx 20rpx 0rpx;
					background-color: #f5f55f5;

					.nr-li-num {
						font-weight: bold;
						font-size: 35rpx;
					}

					.nr-li-type {

						color: #B5B5B5;
						font-size: 35rpx;
					}
				}

			}

		}
	}

	.nr-but {
		padding: 20rpx 0rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.client-box {

		width: 650rpx;
		padding-bottom: 40rpx;
		margin-top: 50rpx;

		.client-title {
			color: #333333;
			font-size: 36rpx;
			font-weight: bold;
			padding: 0rpx 40rpx;
			padding-bottom: 20rpx;
		}

		.client-cell {
			width: 95%;
			margin: 0 auto;
			background-color: #fff;
			box-shadow: 0 0 10px #ccc;
			padding: 5rpx 0rpx;
			border-radius: 5px;
			margin-bottom: 10px;
		}

		.client-nr {
			width: 95%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 5px;

			.nr-title {
				padding: 20rpx;
				border-bottom: 1px solid #ccc;
			}

			.nr-text {
				padding: 10rpx 0rpx;
			}
		}

		.client-but {
			width: 95%;
			margin: 0 auto;
			padding-top: 90rpx;
		}
	}
</style>